<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/account.css">
  <link rel="stylesheet" href="./css/order.css">
</head>

<body>
  <div class="Fade"></div>
  <div class="drawer">
    <div class="addaddress none">
      <div class="title">
        <h2>新增收货地址</h2>
      </div>
      <form class="form">
        <div class="form-group">
          <label for="exampleInputName">姓名 *</label>
          <input type="text" class="form-control" id="exampleInputName" placeholder="Name">
        </div>
        <div class="form-group">
          <label for="exampleInputPhone">固定电话</label>
          <input type="text" class="form-control" id="exampleInputPhone" placeholder="Phone">
        </div>
        <div class="form-group">
          <label for="exampleInputmobile">手机号 *</label>
          <input type="text" class="form-control" id="exampleInputmobile" placeholder="mobile">
        </div>
        <div class="form-group">
          <label for="exampleInputprovince">省(市)级 *</label>
          <input type="text" class="form-control" id="exampleInputprovince" placeholder="province">
        </div>
        <div class="form-group">
          <label for="exampleInputcity">城市 *</label>
          <input type="text" class="form-control" id="exampleInputcity" placeholder="city">
        </div>
        <div class="form-group">
          <label for="exampleInputdistrict">区县 *</label>
          <input type="text" class="form-control" id="exampleInputdistrict" placeholder="district">
        </div>
        <div class="form-group">
          <label for="exampleInputzip">邮编 *</label>
          <input type="text" class="form-control" id="exampleInputzip" placeholder="zip">
        </div>
        <div class="form-group none">
          <label for="exampleInputid">id *</label>
          <input type="text" class="form-control" id="exampleInputid" placeholder="id">
        </div>
        <button type="button" class="btn btn-info back">取消</button>
        <button type="button" class="btn btn-info Submit ">确定</button>
      </form>
    </div>
    <div class="editaddress none">
      <div class="title">
        <h2>新增收货地址</h2>
      </div>
      <form class="form">
        <div class="form-group">
          <label for="exampleInputName">姓名 *</label>
          <input type="text" class="form-control" id="exampleInputName" placeholder="Name">
        </div>
        <div class="form-group">
          <label for="exampleInputPhone">固定电话</label>
          <input type="text" class="form-control" id="exampleInputPhone" placeholder="Phone">
        </div>
        <div class="form-group">
          <label for="exampleInputmobile">手机号 *</label>
          <input type="text" class="form-control" id="exampleInputmobile" placeholder="mobile">
        </div>
        <div class="form-group">
          <label for="exampleInputprovince">省(市)级 *</label>
          <input type="text" class="form-control" id="exampleInputprovince" placeholder="province">
        </div>
        <div class="form-group">
          <label for="exampleInputcity">城市 *</label>
          <input type="text" class="form-control" id="exampleInputcity" placeholder="city">
        </div>
        <div class="form-group">
          <label for="exampleInputdistrict">区县 *</label>
          <input type="text" class="form-control" id="exampleInputdistrict" placeholder="district">
        </div>
        <div class="form-group">
          <label for="exampleInputzip">邮编 *</label>
          <input type="text" class="form-control" id="exampleInputzip" placeholder="zip">
        </div>
        <div class="form-group none">
          <label for="exampleInputid">id *</label>
          <input type="text" class="form-control" id="exampleInputid" placeholder="id">
        </div>
        <button type="button" class="btn btn-info back">取消</button>
        <button type="button" class="btn btn-info submit">确定</button>
      </form>
    </div>
    </form>
  </div>
  <div class="payPic none">
    <div class="pic">
      <img src="" alt="">
    </div>
    <div class="Paybtn">
      <button class="btn btn-info judgePay">我已支付</button>
    </div>
  </div>
  <header>
    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <a href=""><span class="logo-text">DJI 大疆官网</span></a>
          <a href="javascript:void(0)" class="Logined none">
            <span>
              欢迎,<span class="userName"></span>
            </span>
          </a>
        </div>
        <div class="col-md-10">
          <div class="header-right">
            <span><a href="my_account.html" class="myAccount none">我的账号</a></span>
            <a href="login.html" class="unLogin"><span>登录</span></a>
            <span class="line"></span>
            <a href="shoppingCar.html"><span class="car">购物车</span></a>
            <span class="iconfont icon-home"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="wrap">
    <div class="container pb-20">
      <h2>订单结算</h2>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <div class="cont p-20">
            <div class="row">
              <div class="col-md-10">收货人信息</div>
              <div class="col-md-2 t-right pointer ftx-05 addAdress">新增收货地址</div>
              <ul class="col-md-12 pt-20">
                <!-- <li class="mt-10">
                  <div class="address-items p-20 pointer a-i-active">
                    <span class="itemsName">tcy</span>
                    <span class="itemsPhone">(18630313220)</span>
                    <span class="moren  none">默认</span>
                    <p class="detailsAddress">123456</p>
                    <div class="edit fr none ">
                      <a href="javascript:void(0)" class="editAddress" onclick="editAddress()">修改</a>
                      <a href="javascript:void(0)" onclick="deleteAddress()">删除</a>
                    </div>
                  </div>
                </li> -->
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="cont p-20">
            <div class="col-md-12 pb-20">订单概览</div>
            <div class="goods-item mt-20">
              <div class="row">
                <!-- <div class="col-md-12 mb-20">
                  <div class="col-md-3">
                    <img src="./img/index_img/929cf1848642494cc2e3c920c3aa3af1@small.png" alt="">
                  </div>
                  <div class="col-md-6 sheng">
                    <span>闪迪 microSD卡 128GB123</span>
                    <p><span>￥</span> <span class="price">179</span> x <span class="count">1 </span></p>
                  </div>
                  <div class="col-md-3 cm3-Price">￥ <span class="Price">179</span></div>
                </div>
                <div class="col-md-12 mb-20">
                  <div class="col-md-3">
                    <img src="./img/index_img/929cf1848642494cc2e3c920c3aa3af1@small.png" alt="">
                  </div>
                  <div class="col-md-6 sheng">
                    <span>闪迪 microSD卡 128GB123</span>
                    <p><span>￥</span> <span class="price">179</span> x <span class="count">1 </span></p>
                  </div>
                  <div class="col-md-3 cm3-Price">￥ <span class="Price">179</span></div>
                </div> -->
              </div>
            </div>
            <div class="row">
              <div class="col-md-12 mt-20 ">
                <div class="col-md-6">商品总金额:</div>
                <div class="col-md-6 t-right f-16"><span>￥</span><span class="totalPrice"></span></div>
              </div>
              <div class="col-md-12">
                <button type="button" class="btn btn-info creatOrder" onclick="creatOrder()">提交订单</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src=" ./js/jquery-3.4.1.min.js">
  </script>
  <script src="./js/url.js"></script>
  <script>
    // 初始化
    function init() {
      showAddresslist()
      showGoods()
      LoginOr()
    }
    init()
    //添加收货地址 4.1  ke
    function addAddress() {
      console.log(208)
      const receiver_name = $('#exampleInputName').val()
      const receiver_phone = $('#exampleInputPhone').val()
      const receiver_mobile = $('#exampleInputmobile').val()
      const receiver_province = $('#exampleInputprovince').val()
      const receiver_city = $('#exampleInputcity').val()
      const receiver_district = $('#exampleInputdistrict').val()
      const receiver_zip = $('#exampleInputzip').val()
      const uesr_id = localStorage.user_id //待存储
      if (receiver_name === '') {
        alert('姓名不能为空')
      } else {
        if (receiver_phone === '') {
          alert('固定电话不能为空')
        } else {
          if (receiver_mobile === '') {
            alert('手机号码不能为空')
          } else {
            if (receiver_province === '') {
              alert('省份不能为空')
            } else {
              if (receiver_city === '') {
                alert('城市不能为空')
              } else {
                if (receiver_zip === '') {
                  alert('邮编不能为空')
                } else {
                  $.ajax({
                    type: "POST",
                    url: addressUrl,
                    xhrFields: { withCredentials: true },
                    data: { 'type': 'add', 'uesr_id': uesr_id, 'receiver_name': receiver_name, 'receiver_phone': receiver_phone, 'receiver_mobile': receiver_mobile, 'receiver_province': receiver_province, 'receiver_city': receiver_city, 'receiver_zip': receiver_zip, 'receiver_district': receiver_district },
                    dataType: "json",
                    success: function (res) {
                      console.log(res)
                      if (res.status === 0) {
                        alert('添加地址成功')
                        close();
                        showAddresslist()
                      } else if (res.status === 100) {
                        alert('添加地址失败')
                      }
                    },
                    error: function () {
                      console.log('出现错误')
                    }
                  })
                }
              }
            }
          }
        }
      }
    }
    //显示地址列表 4.5  ke
    function showAddresslist() {
      console.log(263)
      $.ajax({
        type: 'POST',
        url: addressUrl,
        dataType: 'json',
        data: { 'type': 'list', 'pageNum': 1, 'pageSize': 10 },
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            let data = res.data
            console.log(data)
            $('ul').html('')
            for (let i = 0; i < data.length; i++) {
              const address_id = data[i].id
              const receiver_name = data[i].receiver_name
              const receiver_phone = data[i].receiver_phone
              const receiver_mobile = data[i].receiver_mobile
              const receiver_province = data[i].receiver_province
              const receiver_city = data[i].receiver_city
              const receiver_district = data[i].receiver_district
              const receiver_zip = data[i].receiver_zip
              const li =
                `
              <li class="mt-10">
                <div class="address-items p-20 pointer" address_id='${address_id}'>
                  <span class="itemsName">${receiver_name}</span>
                  <span class="itemsPhone">(${receiver_phone})</span>
                  <span class="moren none">默认</span>
                  <p class="detailsAddress">${receiver_province}${receiver_city}</p>
                  <div class="edit fr none ">
                    <a href="javascript:void(0)" class="editAddress" onclick="editAddress(${address_id})">修改</a>
                    <a href="javascript:void(0)" onclick="deleteAddress(${address_id})">删除</a>
                  </div>
                </div>
              </li>
            `
              $('ul').prepend(li)
            }

          }

        }
      })
    }
    //删除地址 4.2  ke
    function deleteAddress(id) {
      console.log(309)
      const address_id = id
      $.ajax({
        type: 'POST',
        url: addressUrl,
        dataType: 'json',
        data: { 'type': 'del', 'address_id': address_id },
        xhrFields: { withCredentials: true },
        success: function (res) {
          if (res.status === 0) {
            showAddresslist()
          }
        }
      })
    }
    //查看地址 4.4   1 ke
    function editAddress(id) {
      console.log(325)
      $.ajax({
        type: 'POST',
        url: addressUrl,
        dataType: 'json',
        data: { 'type': 'select', 'address_id': id },
        xhrFields: { withCredentials: true },
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            $('.editaddress #exampleInputName').val(res.data.receiver_name)
            $('.editaddress #exampleInputPhone').val(res.data.receiver_phone)
            $('.editaddress #exampleInputmobile').val(res.data.receiver_mobile)
            $('.editaddress #exampleInputprovince').val(res.data.receiver_province)
            $('.editaddress #exampleInputcity').val(res.data.receiver_city)
            $('.editaddress #exampleInputdistrict').val(res.data.receiver_district)
            $('.editaddress #exampleInputzip').val(res.data.receiver_zip)
            $('.editaddress #exampleInputid').val(res.data.id)
          }
        }
      })
    }
    //更新地址 4.3   1 重复alert
    function updataAddress() {
      console.log(352)
      const receiver_name = $('.editaddress #exampleInputName').val()
      const receiver_phone = $('.editaddress #exampleInputPhone').val()
      const receiver_mobile = $('.editaddress #exampleInputmobile').val()
      const receiver_province = $('.editaddress #exampleInputprovince').val()
      const receiver_city = $('.editaddress #exampleInputcity').val()
      const receiver_district = $('.editaddress #exampleInputdistrict').val()
      const receiver_zip = $('.editaddress #exampleInputzip').val()
      const adddress_id = $('.editaddress #exampleInputid').val()
      if (receiver_name === '') {
        alert('姓名不能为空')
      } else {
        if (receiver_phone === '') {
          alert('固定电话不能为空')
        } else {
          if (receiver_mobile === '') {
            alert('手机号码不能为空')
          } else {
            if (receiver_province === '') {
              alert('省份不能为空')
            } else {
              if (receiver_city === '') {
                alert('城市不能为空')
              } else {
                if (receiver_zip === '') {
                  alert('邮编不能为空')
                } else {
                  $.ajax({
                    type: "POST",
                    url: addressUrl,
                    xhrFields: { withCredentials: true },
                    data: { 'type': 'update', 'id': adddress_id, 'receiver_name': receiver_name, 'receiver_phone': receiver_phone, 'receiver_mobile': receiver_mobile, 'receiver_province': receiver_province, 'receiver_city': receiver_city, 'receiver_zip': receiver_zip, 'receiver_district': receiver_district },
                    dataType: "json",
                    success: function (res) {
                      console.log(res)
                      if (res.status === 0) {
                        console.log('更新地址成功')
                        close();
                        showAddresslist()
                      } else if (res.status === 100) {
                        console.log('更新地址失败')
                      }
                    },
                    error: function () {
                      console.log('出现错误')
                    }
                  })
                }
              }
            }
          }
        }
      }
    }
    //显示商品列表 5.1 ke
    function showGoods() {
      console.log(409)
      $.ajax({
        type: "POST",
        url: carUrl,
        xhrFields: { withCredentials: true },
        data: { 'type': 'list' },
        dataType: "json",
        success: function (res) {
          console.log(res.data.cartProductVOList)
          let goodsArray = res.data.cartProductVOList
          if (res.status === 0) {
            let TotalPrice = 0
            for (let i = 0; i < goodsArray.length; i++) { //遍历每条数据
              const checked = goodsArray[i].checked
              console.log(goodsArray[i])
              if (checked === 0) {
                continue
              }
              const product_name = goodsArray[i].product_name
              const product_image = goodsArray[i].product_image
              const price = goodsArray[i].price
              const quantity = goodsArray[i].quantity
              const total_price = goodsArray[i].total_price
              const main_image = goodsArray[i].main_image
              const col =         //创建一个商品项
                `
                <div class="col-md-12 mb-20">
                  <div class="col-md-3">
                    <img src="${imgUrl + main_image}" alt="">
                  </div>
                  <div class="col-md-5 sheng">
                    <span>${product_name}</span>
                    <p><span>￥</span> <span class="price">${price}</span> x <span class="count">${quantity} </span></p>
                  </div>
                  <div class="col-md-4 cm3-Price">￥ <span class="Price">${total_price}</span></div>
                </div>
              `
              $('.goods-item .row').append(col)  //将改商品添加到对应的地方
              TotalPrice = total_price * 1 + TotalPrice * 1
            }
            $('.totalPrice').text(TotalPrice)
          }
        },
        error: function () {
          console.log('出现错误')
        }
      })
    }
    let ORDER_NO
    //创建订单 2.1 ke

    function creatOrder() {
      console.log(458)
      $('.payPic').removeClass('none')
      const address_id = localStorage.address_id
      console.log(address_id)
      if (address_id === 'address_id') {
        alert('请选择地址')
      } else {
        $.ajax({
          type: "POST",
          url: orderUrl,
          xhrFields: { withCredentials: true },
          data: { 'type': 'create', 'address_id': address_id },
          dataType: "json",
          success: function (res) {
            if (res.status === 0) {
              const order_no = res.data.order_no
              ORDER_NO = order_no
              //
              pay(order_no)
              // console.log('创建成功，转到支付页面')
            }
          },
          error: function () {
            console.log('出现错误')
          }
        })
      }

    }

    $('.judgePay').click(function () {
      $.ajax({
        type: "POST",
        url: payUrl,
        xhrFields: { withCredentials: true },
        data: { 'type': 'query_order_pay_status', 'order_no': ORDER_NO },
        dataType: "json",
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            $('.payPic').addClass('none')
            window.location.href = 'my_account.html'
          }
        },
        error: function () {
          console.log('出现错误')
        }
      })
    })
    ////支付
    function pay(order_no) {
      $('.payPic').removeClass('none')
      $.ajax({
        type: "POST",
        url: payUrl,
        xhrFields: { withCredentials: true },
        data: { 'type': 'pay', 'order_no': order_no },
        dataType: "json",
        success: function (res) {
          console.log(res)
          if (res.status === 0) {
            let imgPath = res.data.qrPath
            $('.payPic img').attr('src', imgPath)
          }
        },
        error: function () {
          console.log('出现错误')
        }
      })
    }
  </script>
  <script>
    function open() {
      $('body').css("overflow-y", "hidden")
      $('.Fade').fadeIn(500)
      $('.drawer').css("margin-right", 0)
    }
    function close() {
      $('.drawer').css("margin-right", -500)
      $('.Fade').fadeOut(500, function () {
        $('body').css("overflow-y", "scroll")
      })
      $('.addaddress,.editaddress').addClass('none')
    }
    $('.Fade,.back').click(function () {
      close()
    })
    // 点击添加地址
    $('.addAdress').click(function () {
      $('.addaddress').removeClass('none')
      open()
      $('.Submit').click(function () {
        addAddress()
      })
    })
    //提交地址更改信息
    $('.submit').click(function () {
      updataAddress()
    })
  </script>
  <script>
    $('ul').on('click', '.address-items', function () {
      $(this).addClass('a-i-active')
      $(this).parent().siblings().children().removeClass('a-i-active')
      localStorage.address_id = $(this).attr('address_id')
    })
    $('ul').on('mouseover', '.address-items', function () {
      // console.log($('.submit'))
      $(this).find('.edit').removeClass('none')
      $(this).find('.editAddress').click(function () {
        $('.editaddress').removeClass('none')
        open()
      })
    })
    $('ul').on('mouseout', '.address-items', function () {
      $(this).find('.edit').addClass('none')
    })
  </script>
</body>

</html>